<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/common/mui.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
			<h1 class="mui-title">off canvas（侧滑导航）</h1>
		</header>

		<div class="mui-content">
			<div class="mui-content-padded">
				<p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中， 优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）； 当前页面为主界面，你可以在主界面放置任何内容；
				</p>
				<p style="padding: 5px 20px;margin-bottom: 5px;">
					<button id="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">显示侧滑菜单</button>
				</p>
			</div>
		</div>
	</body>
	<script>
		//生成2个对象分别控制主窗口和菜单窗口；
		var menu = null,
			main = null;
		var showMenu = false;
		var isInTransition = false;
		//开始预加载菜单页；
		mui.plusReady(function() {
			main = plus.webview.currentWebview();
			main.addEventListener('maskClick', closeMenu);
			//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
			setTimeout(function() {
				menu = mui.preload({
					id: 'sidemenu',
					url: 'sidemenu.html',
					styles: {
						left: 0,
						width: '70%',
						zindex: -1
					}
				});
			}, 200);
		});
		//打开侧滑窗口；
		function openMenu() {
			if(isInTransition) {
				return;
			}
			if(!showMenu) {
				//侧滑菜单处于隐藏状态，则立即显示出来；
				isInTransition = true;
				menu.setStyle({
					mask: 'rgba(0,0,0,0)'
				}); //menu设置透明遮罩防止点击
				menu.show('none', 0, function() {
					//主窗体开始侧滑并显示遮罩
					main.setStyle({
						mask: 'rgba(0,0,0,0.4)',
						left: '60%',
						transition: {
							duration: 200
						}
					});
					mui.later(function() {
						isInTransition = false;
						menu.setStyle({
							mask: "none"
						}); //移除menu的mask
					}, 200);
					showMenu = true;
				});
			}
		};
		//关闭侧滑窗口；
		function closeMenu() {
			if(isInTransition) {
				return;
			}
			if(showMenu) {
				//关闭遮罩；
				//主窗体开始侧滑；
				isInTransition = true;
				main.setStyle({
					mask: 'none',
					left: '0',
					transition: {
						duration: 200
					}
				});
				showMenu = false;
				//等动画结束后，隐藏菜单webview，节省资源；
				mui.later(function() {
					isInTransition = false;
					menu.hide();
				}, 200);
			}
		};
		//点击头部菜单小图标，打开侧滑菜单；
		document.querySelector('.mui-icon-bars').addEventListener('swiperight', openMenu);
		//点击自定义按钮，打开侧滑菜单；
		document.querySelector('#show-btn').addEventListener('swiperight', openMenu);
		//menu页面点击后关闭菜单；
		window.addEventListener("menu:tap", closeMenu);
	</script>

</html>